<template>
  <div>
    <div class="message">
      <div>
        本月出勤天数
        <h5>{{ leaverecord.present }}</h5>
      </div>
      <div>
        本月迟到次数
        <h5>{{ leaverecord.beLate }}</h5>
      </div>
      <div>
        本月早退次数
        <h5>{{ leaverecord.leaveEarly }}</h5>
      </div>
    </div>
    <div id="chart" class="chart"></div>
  </div>
</template>

<script>
export default {
  props: {
    leaverecord: {
      type: Object,
      default() {
        return {}
      },
    },
  },
  data() {
    return {}
  },
  methods: {
    getLoadEcharts() {
      var myChart = this.$echarts.init(document.getElementById('chart'))

      var option = {
        tooltip: {
          trigger: 'item',
        },
        legend: {
          top: '5%',
          left: 'center',
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: true,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2,
            },
            label: {
              show: false,
              position: 'outside',
            },
            emphasis: {
              label: {
                show: false,
                fontSize: '40',
                fontWeight: 'bold',
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: this.leaverecord.present, name: '本月出勤天数' },
              { value: this.leaverecord.beLate, name: '本月迟到次数' },
              { value: this.leaverecord.leaveEarly, name: '本月早退次数' },
            ],
          },
        ],
      }
      myChart.setOption(option)
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.getLoadEcharts()
    })
  },
}
</script>

<style lang="scss" scoped>
.message {
  margin-top: 20px;
  display: flex;
  justify-content: space-evenly;
  div {
    width: 238px;
    height: 112px;
    background-color: #fff;
    border-radius: 10px 10px 10px 10px;
    padding-top: 10px;
    padding-left: 20px;
    padding-right: 20px;
    text-align: center;
  }
}
.chart {
  width: 400px;
  height: 400px;
  margin: 40px auto;
}
</style>
